.bs-order-detail {
  .flow-distribution {
    padding: 18rpx 0;
    border-bottom: 1rpx solid #eee;
  }
  .icon-copy{
    margin-left: 10rpx;
  }

  .flow-distribution .flow-dis {
    font-size: 30rpx;
  }

  .flow-distribution-left {
    flex: 14;
  }

  .flow-distribution-left .m-l {
    color: #333;
    float: right;
  }

  .flow-distribution-right {
    flex: 1;
  }

  .flow-distribution image {
    width: 30rpx;
    height: 30rpx;
    margin-top: 6rpx;
    float: right;
  }

  .flow-message-box {
    padding: 20rpx 15px;
    position: relative;
  }

  .flow-message-box .flow-message-title {
    color: #777;
  }

  .flow-message-box textarea {
    height: 100rpx;
    width: 100%;
    margin-top: 10rpx;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #eee;
  }

  .flow-message-box .flow-message-num {
    position: absolute;
    bottom: 34rpx;
    right: 30rpx;
    font-size: 26rpx;
    color: #777;
  }

  /*asdasd*/

  .flow-distribution .flow-dis {
    padding-right: 15px;
  }

  .flow-message-box {
    border-bottom: 1rpx solid #f1f1f1;
  }

  .flow-message-box .cont {
    padding: 10px 0;
    color: #000;
  }

  .order-cont {
    /* padding: 12rpx 0; */
    justify-content: space-between;
  }

  .order-cont .order-num text,
  .order-cont .time {
    color: #888;
  }

  .order-cont .order-num text,
  .order-cont .order-time text {
    color: #777;
    font-size: 26rpx;
  }

  .order-header {
    border-bottom: 1rpx solid #f1f1f1;
    padding: 15rpx 0;
  }

  .order-header text {
    font-size: 30rpx;
  }

  .order-header text.title {
    color: #333;
  }

  .flow-list .header {
    position: relative;
    padding: 15rpx 0;
    background: #fff;
    border-bottom: 1rpx solid #f1f1f1;
  }

  .flow-list .header text {
    padding-left: 80rpx;
    font-size: 32rpx;
  }

  .flow-list .header image {
    width: 34rpx;
    height: 37rpx;
    position: absolute;
    top: 50%;
    margin-top: -18rpx;
    left: 15px;
  }


  .chackout-right-detail,
  .chackout-left-detail {
    font-size: 34rpx;
    color: #333;
  }

  .chackout-left-detail {
    line-height: 44px;
  }

  .pay-box {
    background: white;
    height: 600rpx;
  }

  .payment-methods {
    margin-top: 40rpx;
    padding: 10rpx;
  }

  .radio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 10rpx;
  }

  .qr-code-container {
    width: 288rpx;
    height: 288rpx;
    text-align: center;
    margin: auto;
  }

  image {
    max-height: 100%;
    max-width: 100%;
  }


  .btn-group {
    display: flex;
    justify-content: space-around; /* 子元素之间及与边框之间均匀分布 */
    flex-wrap: wrap; /* 如果需要换行 */
    padding: 10px;
    margin: 0 -5px; /* 调整左右边距，使按钮之间的间距更均匀 */
    .btn {
      flex: 1; /* 让每个按钮占据相等的空间 */
      margin: 5px; /* 给每个按钮添加一些外边距 */
      min-width: 80px; /* 设置最小宽度以防止按钮过窄 */
      box-sizing: border-box; /* 确保 padding 和 border 包含在元素的宽度和高度内 */
      /* background-color: #007bff; 按钮背景颜色 */
      /*color: white;  文字颜色 */
      border: none;
      padding: 2px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #0056b3; /* 悬停时的背景颜色 */
    }

    /* 当按钮数量较少时，保持按钮有一定的最大宽度 */
    @media (min-width: 600px) {
      .btn {
        max-width: calc(50% - 10px); /* 两个按钮时每行占一半宽度 */
      }
    }

    @media (min-width: 900px) {
      .btn {
        max-width: calc(33.333% - 10px); /* 三个按钮时每行占三分之一宽度 */
      }
    }

    @media (min-width: 1200px) {
      .btn {
        max-width: calc(25% - 10px); /* 四个按钮时每行占四分之一宽度 */
      }
    }
  }


}
